<template>
  <div class="shade" v-show="filterShow">
    <div class="shadeChoose">
      <div class="vicp-close"  @click="filterShow=false">
        <i class="el-icon-close vicp-icon4"></i>
      </div>
      <div class="shadeMain">
        <div class="channelsChoose">
          <div class="chinnelSwitch">
            <span class="switch">选择渠道：</span>
            <div class="filter" >
              <el-input v-model="channelVal" placeholder="请输入渠道名称" icon="search"></el-input>
            </div>
          </div>
          <div class="chinnelRadio" >
            <template>
              <el-checkbox-group v-model="chinnelRadio" @change="channelRadioChange">
                <el-checkbox :label="item.value" v-for="item in newChannels">{{item.value}}</el-checkbox>
              </el-checkbox-group>
            </template>
            <div class="afterChoose">
              <span>选中筛选条件：</span>
                <el-tag v-show="chinnelTagValue"
                  v-for="tag in chinnelRadio"  type="success"
                  :key="tag">
                {{tag}}
                </el-tag>
            </div>
          </div>
        </div>
        <div class="sureBtn">
          <el-button type="info" @click='sure'>确认</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        // 高级筛选模态框
        filterShow: false,
        // channelVal渠道的搜索框的值
        channelVal: '',
        // 渠道选择的数量
        channelNumber: 0,
        // 渠道单选按钮值
        chinnelRadio: [],
        // 渠道标签
        chinnelTagValue: true,
      }
    },
    methods: {
      // 通用 成功 与 失败
      successFun(data) {
        this.$message({
          message: data,
          type: 'success'
        });
      },
      errorFun(data) {
        this.$message.error(data);
      },
      // 全部渠道按钮点击
      allChannel() {
        // this.chinnelRadio = "0";s
      },
      // 非全部渠道按钮点击
      noAllChannel() {

      },
      //渠道单选按钮函数
      channelRadioChange(val) {
        console.log(this.chinnelRadio)
      },
      // 模态框确定
      sure() {
        this.filterShow = false;
        this.$emit('get',this.chinnelRadio)
      },
      // 模态框取消关闭数据不记录
      cancel() {
        this.filterShow = false;
      }
    },
    computed: {
      // 渠道过滤
      newChannels: function() {
        var that = this;
        return that.channels.filter(function(item) {
          return item.value.toLowerCase().indexOf(that.channelVal.toLowerCase()) !== -1;
        })
      }
    },
    props: ['channels']
  }
</script>
